<template>
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="props.flags"
  >
    <div v-for="(item,index) in menu" :key="index">
      <el-menu-item v-if="item.Subclass==0" :index="item.id" @click="datas(index)">
      <el-icon><component :is="item.icon"></component></el-icon>
      <template #title>
         <router-link :to="item.router"><span>{{item.title}}</span></router-link>
      </template>
    </el-menu-item>
    </div>
  </el-menu>
</template>

<script lang="ts">
import { onMounted, reactive, ref, shallowRef,computed} from "vue";
import { useStore } from "vuex";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Fold,
  HomeFilled,
  ArrowRightBold,
  ArrowLeftBold,
  Avatar,
  Edit,
  Calendar,
  ChatDotSquare,
  Grid,
  VideoCameraFilled,
  Film
} from "@element-plus/icons-vue";

export default {
  components: {
    Location,
    Document,
    Setting,
    IconMenu,
    Fold,
    HomeFilled,
    ArrowRightBold,
    ArrowLeftBold,
    Avatar,
    Edit,
    Calendar,
    ChatDotSquare,
    Grid ,
    VideoCameraFilled,
    Film
  },
     props:{
      flags:Boolean
    },
     // 通过emits定义事件
      emits:['click-data'],
    setup(props,{emit}) {
    
    const store = useStore(); //vuex仓库
    const roleTag=computed(()=>{
      return store.state.user.roleTag;
    })
    const data=[{
        id:'1',
        icon:Calendar,
        title:'排片管理',
        router:'/home/arrange',
        Subclass:[],//是否有二级三级菜单
        role:["movie"]
    },
    {
        id:'2',
        icon:Avatar,
        title:'用户管理',
        router:'/home/ac',
        Subclass:[],//是否有二级三级菜单
        role:["admin"]
    },
     {
        id:'3',
        icon:Document,
        title:'订单管理',
        router:'/home/order',
        Subclass:[],//是否有二级三级菜单
         role:["movie"]
    },
     {
        id:'4',
        icon:Film,
        title:'影片管理',
        router:'/home/movie',
        Subclass:[],//是否有二级三级菜单
         role:["movie"]
    },
     {
        id:'5',
        icon:VideoCameraFilled,
        title:'影院管理',
        router:'/home/cinema',
        Subclass:[],//是否有二级三级菜单
         role:["movie"]
    },
    {
        id:'6',
        icon:Grid,
        title:'座位管理',
        router:'/home/seat',
        Subclass:[],//是否有二级三级菜单
          role:["movie"]
    },
    {
        id:'7',
        icon:Location,
        title:'影厅管理',
        router:'/home/room',
        Subclass:[],//是否有二级三级菜单
          role:["movie"]
    },
     {
        id:'8',
        icon:ChatDotSquare,
        title:'评论管理',
        router:'/home/discuss',
        Subclass:[],//是否有二级三级菜单
        role:["admin"]
    },
    ]
    const filetrData:any=computed(()=>{
      return data.filter(item => item.role.indexOf(roleTag.value)!=-1)
    })
    const datas=(i:any)=>{
      emit('click-data',filetrData.value[i])
    }
    const menu=shallowRef(filetrData)
    return {
      props,menu,datas,filetrData
    };
  },
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo{
  height: 90vh;
}
</style>
